<template>
    <div>
        <v-btn v-hasPermi="['update-user-admin']" prepend-icon="mdi-plus-box" color="green" @click="addClickListener">添加权限</v-btn>
    </div>
    <v-data-table-server :hover="true" :fixed-header="true" :loading="listLoading" :headers="headers" :items="tableList"
        :height="tableHeight" item-value="userId" show-select v-model:items-per-page="query.pageSize"
        :items-length="total" @update:options="loadItems" items-per-page-text="每页数据量"
        :items-per-page-options="[10, 20, 30, 40, 50, 100]">
        <template v-slot:item.actions="{ item }">
            <v-icon v-hasPermi="['update-user-admin']" class="me-2" icon="mdi-pencil-outline" @click="updatePermissionDialog(item)"></v-icon>
            <v-icon v-hasPermi="['update-user-admin']" class="me-2" icon="mdi-delete-outline" @click="deletePermissionDialog(item)"></v-icon>
        </template>
        <template v-slot:item.status="{ item }">
            <v-chip :color="item.status==1?'primary':'red'">
                {{ item.status==1?'正常':'禁用' }}
            </v-chip>
        </template>
    </v-data-table-server>
    <v-dialog persistent v-model="dialogActionConfig.permissionDialog" max-width="600">
        <v-card prepend-icon="mdi-security" :title="dialogActionConfig.title">
            <v-card-text>
                <v-form :readonly="dialogActionConfig.disable">
                    <v-text-field color="primary" v-model="query.name" label="权限名称"></v-text-field>
                    <v-text-field color="primary" v-model="query.remark" label="权限描述"></v-text-field>
                    <v-radio-group color="primary" label="权限状态" inline v-model="query.status">
                        <v-radio :value="1" label="正常" />
                        <v-radio :value="0" label="禁用" />
                    </v-radio-group>
                </v-form>
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn text="取消" variant="plain" @click="restore"></v-btn>
                <v-btn color="primary" text="保存" variant="tonal" @click="confirm"></v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
import { getPermissionList, simplePermissionCurd } from '@/api/adminAccount';
import { formatTimestamp } from '@/util/ruoyi';

export default {
    emits: ["updatePermission"],
    data() {
        return {
            headers: [
                { title: "权限ID", align: "start", key: "permissionId", width: '100' },
                { title: "名称", align: "start", key: "name" },
                { title: "描述", align: "start", key: "remark" },
                { title: "状态", align: "start", key: "status" },
                { title: "创建日期", align: "start", key: "createAtStr" },
                { title: "操作", align: "start", key: "actions" },
            ],
            query: {
                name: '',
                remark: '',
                status: 1,
                curdAction: 'save',

                pageSize: 20,
                pageNum: 1,
            },
            tableHeight: 300,
            total: 0,
            listLoading: false,
            tableList: [],
            dialogActionConfig: {
                action: 'save',
                title: '添加权限',
                permissionDialog: false,
                disable: false
            }
        }
    },
    mounted() {
        this.tableHeight = window.innerHeight - 64 - 48 - 36 - 75;
    },
    methods: {
        loadItems({ page, itemsPerPage }) {
            this.listLoading = true;
            this.query.pageNum = page;
            this.query.pageSize = itemsPerPage;
            getPermissionList(this.query).then(resp => {
                this.dataHandle(resp.rows)
                this.listLoading = false
                this.total = resp.total
            })
        },
        dataHandle(dataList) {
            this.tableList = []
            if (dataList == null) return
            dataList.forEach(dataItem => {
                let permission = {}
                permission.permissionId = dataItem.permissionId
                permission.name = dataItem.name
                permission.remark = dataItem.remark
                permission.status = dataItem.status
                permission.createAt = dataItem.createAt
                permission.createAtStr = formatTimestamp(dataItem.createAt);
                this.tableList.push(permission)
            });
        },
        addClickListener() {
            this.dialogActionConfig.permissionDialog = true
            this.dialogActionConfig.permissionDialog = true
            this.dialogActionConfig.title = '添加权限'
            this.dialogActionConfig.action = 'save'
        },
        restore() {
            this.query={pageSize: this.query.pageSize,pageNum: this.query.pageNum,status: 1}
            this.dialogActionConfig = { action: 'save', title: '添加权限', permissionDialog: false }
            this.loadItems({ page: this.query.pageNum, itemsPerPage: this.query.pageSize })
        },
        confirm() {
            this.dialogActionConfig.disable = true
            this.query.curdAction = this.dialogActionConfig.action
            simplePermissionCurd(this.query).then(resp => {
                if (resp.code === 1) {
                    // this.loadItems({ page: this.query.pageNum, itemsPerPage: this.query.pageSize })
                    this.$emit('updatePermission')
                    this.restore()
                }
                this.dialogActionConfig.disable = false
            }).catch(err => {
                console.log('confirm报错 = ', err);
                this.dialogActionConfig.disable = false
            })
        },
        updatePermissionDialog(data) {
            this.query.name = data.name
            this.query.remark = data.remark
            this.query.createAt = data.createAt
            this.query.status=data.status
            this.query.permissionId = data.permissionId
            this.dialogActionConfig.permissionDialog = true
            this.dialogActionConfig.title = '编辑权限：' + data.name
            this.dialogActionConfig.action = 'update'
        },
        deletePermissionDialog(data) {
            this.dialogActionConfig.disable = true
            this.query.name = data.name
            this.query.remark = data.remark
            this.query.status = data.status
            this.query.permissionId = data.permissionId
            this.dialogActionConfig.permissionDialog = true
            this.dialogActionConfig.title = '是否删除权限：' + data.name
            this.dialogActionConfig.action = 'delete'
        }
    },
}
</script>

<style></style>